import React from 'react'
import WNavBar from '@components/global/navBar'
// @ts-ignore
import Styles from './index.scss'
// @ts-ignore
import QQIcon from '../../icons/qq.svg'
import { PublicENV } from '@config/env'
import { useSelector, useDispatch } from 'react-redux'
import { logout } from '@store/oauth/actions'
import { StoreType } from '@store/types'
import { Button, Toast, Modal } from 'antd-mobile';

const OAuth = () => {

  // oauth 数据
  const oauth = useSelector((store: StoreType) => store.oauth)

  const dispatch = useDispatch()

  /**
   * QQ 点击
   */
  const qqClick = () => {
    const appId = PublicENV.OAUTH_QQ_APP_ID
    const reUrl = PublicENV.OAUTH_QQ_REDIRECT_URL
    const p = `response_type=token&client_id=${appId}&redirect_uri=${reUrl}&scope=get_user_info`
    location.href = `${PublicENV.QQ_OAUTH_URL}?${p}`
  }

  /**
   * 退出按钮点击
   */
  const logoutBtnClick = () => {
    Modal.alert('退出登录', '确定要退出？', [
      {
        text: '取消'
      },
      {
        text: '确定', 
        onPress: () => {
          dispatch(logout())
            // @ts-ignore
            .then(() => {
              Toast.success('退出成功')
            })
            .catch(() => {
              Toast.success('退出失败')
            })
        }
      },
    ])
  }

  return (
    <WNavBar replace="/set" title="OAuth">
      <div className={Styles['set-oauth']}>
        <p className={Styles.title}>
          第三方登录
        </p>
        <p className={Styles.description}>只是学时使用，目前只用于聊天室</p>
        <br />
        {
          oauth.name ?
            <div className={`${Styles['user-box']} w-flex-center`}>
              <span className={`w-image-fil ${Styles['user-icon']}`} style={{ backgroundImage: `url(${oauth.icon})` }}>
                <QQIcon className={Styles['user-icon-type']} width="40" height="40" fill="#E3091D" />
              </span>
              <p className={Styles['user-name']}>{oauth.name}</p>
              <Button
                onClick={logoutBtnClick}
                className={Styles['logout-btn']}
                size="small"
                type="warning">退出登录</Button>
            </div>
            :
            <div className={'w-flex-center'}>
              <QQIcon width="100" height="100" fill="#E3091D" onClick={qqClick} />
            </div>
        }
      </div>
    </WNavBar>
  )
}

OAuth.getInitialProps = async () => {
  return {}
}

export default OAuth
